<template>
  <div class="app-sidebar" style="min-width: 200px">
    <ul style="padding: 0">
      <li v-for="item in menuItems" :key="item.text" :class="{ active: selectedItem === item.text }" @click="selectItem(item)" >
        <v-icon :color="selectedItem === item.text ? 'blue' : 'white'" style="margin-right: 5px;">{{ item.icon }}</v-icon> {{ item.text }}
      </li>
    </ul>
    <div class="box">
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
              color="primary"
              dark
              class="ma-2"
              v-bind="attrs"
              v-on="on"
              :ripple="false"
          >
            <v-icon left>mdi-help-circle</v-icon>
            帮助
          </v-btn>
        </template>
        <span>点击获取帮助信息</span>
      </v-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar-component',
  created() {
    const curItem = localStorage.getItem('curItem');
    if (curItem) {
      this.selectItem(curItem);
      localStorage.removeItem('curItem');
    }
  },
  data() {
    return {
      menuItems: [
        { text: 'WIFI设置', icon: 'mdi-wifi-sync' },
        { text: '端口设置', icon: 'mdi-window-shutter-cog' },
        { text: '注册设备', icon: 'mdi-expand-all' },
        { text: '我的设备', icon: 'mdi-cube-scan' },
        { text: '我的监控', icon: 'mdi-video-account'},
        { text: '系统信息', icon: 'mdi-information-slab-box-outline' }
      ],
      selectedItem: 'WIFI设置',
      drawer: null,
    }
  },
  methods: {
    selectItem(item) {
      // if (item.text === '我的监控') {
      //   alert('该功能暂未开放，敬请期待！');
      //   return;
      // }
      this.selectedItem = item.text;
      console.log(this.selectedItem)
      this.$emit('item-selected', item.text);
    },
  }
}
</script>

<style scoped>
.app-sidebar {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  background-color: #1976D2;
  color: white;
  position: relative;
  border-top: 1px solid #0D47A1;
  border-bottom-left-radius: 10px;
}

.sidebar-header {
  display: flex;
  justify-content: center;
}

.header-icon {
  margin-right: 10px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

ul {
  list-style: none;
}

li {
  padding: 15px;
  cursor: pointer;
  text-align: center;
  border-top: 1px solid #0D47A1;
}

li.active {
  background-color: #E3F2FD;
  color: #1976D2;
}

.box {
  position: absolute;
  bottom: 0;
  right: 0;
}

</style>
